<template>
	<w-container class='schemeDetails' :loading="isLoading">
		<!--  @click="$u.route('/pages/compound/record')"  -->
	<!-- 	<w-navbar leftIcon="back-btn" :titleStyle="{color:'#222'}"  :title="title" navType="compound" bgColor="#F5F5F5">
			<view  @click="$u.route('/pages/compound/record')" >是啊是的</view>
		</w-navbar> -->
		<w-navbar :placeholder="false" navType="goods" :title='pageTitle' :bgColor="bgColor" :opacity="opacity"
			:leftIconSize="32" :leftIcon="opacity>0.8?'arrow-left-back':'arrow-left-back'"
			:titleStyle="{color:opacity>0.8?'#222':'#fff'}" :product="{name:title}">
			<template #right>
				<view @click="ruleShow = !ruleShow"  class="font-color-white">合成规则</view>
			</template>
		</w-navbar>
		<u-status-bar></u-status-bar>
		<!-- 主图 -->
		<mainImg :src="image" :title="title" :rule_hc_result="rule_hc_result"></mainImg>
		<!-- 玩法介绍 -->
		<!-- <view class="card " style="background-color: #363233;">
			<w-big-title title="玩法描述" :hengxian="false" style="color: #fff;"></w-big-title>
			<view class="mt-12">
				<u-parse class="font-color-white" :content='handleLang(description)'></u-parse>
			</view>
		</view> -->
		<!-- 选择材料 -->
		<view class="card mt-16 ptb-16" style="background-color: #363233;">
			<w-big-title title="合成材料" :hengxian="false" style="color: #fff;"></w-big-title>
			<!-- <changeMaterials :list="rule_text" @change="changeMl"></changeMaterials> -->
			<SelectMaterials :list="rule_text" @changeFirst="changeFirst" class="mt-12" />
		</view>
		<!-- 合成按钮 -->
		<view class="hc_button">
			<view class="flex flex-ai-center flex-js-sb">
				<!-- <view class="flex flex-dir-col">
					<view class="font-color-white font-size-12 mb-4">当前最大合成分数:10</view>
					<u-number-box bgColor="#595854" color="#ffffff" integer></u-number-box>
				</view> -->
				<!-- // <w-button style="width: 416rpx;border-radius: 48rpx;height: 96rpx;" :disabled="isDisabled" @click="confimPop=true">{{handleLang('立即合成')}}</w-button> -->
				<w-button style="width: 100%;border-radius: 48rpx;height: 96rpx;" @click="confimPop=true">{{handleLang('立即合成')}}</w-button>
			</view>
			<u-safe-bottom></u-safe-bottom>  
		</view>
		<!-- 确认合成弹窗 -->
		<!-- <w-toast :cancelText="handleLang('再想想')" v-model="confimPop" :content="getPopContent()" @action="checkCaptcha"></w-toast> -->
		<u-popup :show="confimPop" @close="confimPop = false" mode="bottom" round="18rpx">
			<view class="pt-16 plr-16">
				<view class="text-center">
					<view class="font-color-textPrimary font-size-18 font-w-500">合成确定</view>
					<view class="font-size-14 mt-4">
						<text style="color: #565656;">预计可合成目标数量: </text>
						<text style="color: #F0702A;" class="">1</text>
					</view>
					<view class="font-size-12 mt-12" style="color: #A4A4A4;">若目标藏品份数不足，则实际合成数量会少于预计数量</view>
				</view>
				<view class="mt-24 flex flex-ai-center" style="color: #838184;background-color: #E3E1E4;">
					<view class="wb-50 text-center ptb-8 border-right border-left border-top border-bottom">合成条件</view>
					<view class="wb-50 text-center ptb-8 border-right border-top border-bottom">消耗份数</view>
				</view>
				<view v-for="(item,index) in rule_text" :key="item.rule_id" class=" flex flex-ai-center font-w-500 border-bottom" style="color: #5D5B5E;">
					<view class="wb-50 text-center ptb-12 border-right border-left ">{{ item.name }}</view>
					<view class="wb-50 text-center ptb-12 border-right">{{ item.number }}</view>
				</view>
			</view>
			<view @click="confirmSubmit" class="text-center btn-class mt-24">确定</view>
			<view @click="confimPop = false" class="text-center btn-class mt-20">取消</view>
			<u-gap height="24"></u-gap>
			<u-safe-bottom></u-safe-bottom>
		</u-popup>
		<u-popup :show="confimImgPop"  mode="center" round="18rpx">
			<view class="synthesisimg-box">
				<view style="color: #181818;" class="font-size-18 font-w-500 text-center">正在合成中...</view>
				<view class="font-size-12 text-center mt-10" style="color: #9D9D9D;">可在合成订单中查看合成进度</view>
				<view class="mt-24 flex flex-ai-center font-w-500" style="color: #29292A;background-color: #E3E1E4;">
					<view class="wb-50 text-center ptb-8 border-right border-left border-top border-bottom">目标专辑</view>
					<view class="wb-50 text-center ptb-8 border-right border-top border-bottom">藏品编号</view>
				</view>
				<view v-for="(item,index) in resultInfo && resultInfo.result" :key="item.id" class="flex flex-ai-center font-w-500 border-bottom  font-size-12  border-right border-left" style="color: #555555;">
					<view class="wb-50 text-center pa-8  text-overflow">{{ item.name }}</view>
					<view class="wb-50 text-center pa-8 border-left flex flex-ai-center flex-js-center flex-w" style="gap: 24rpx;">
						<view v-for="(p,i) in resultInfo.des_collection_ids && resultInfo.des_collection_ids.split(',')" :key="p">{{ p }}
							<text v-if="i+1 != resultInfo.des_collection_ids.split(',').length">、</text>
						</view>
					</view>
				</view>
				<view class="flex flex-ai-center flex-js-sa mt-32 font-color-theme font-size-12">
					<view @click="confimImgPop = false">返回</view>
					<view @click="lookOrder">查看合成订单</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="ruleShow" @close="ruleShow = false" mode="center" round="18rpx">
			<view class="pa-16" style="width: 690rpx;">
				<view style="color: #181818;" class="font-size-18 font-w-500 text-center mb-12">合成规则</view>
				<scroll-view scroll-y="true" style="height: 60vh;">
					<u-parse class="font-color-black" :content='handleLang(description)'></u-parse>
				</scroll-view>
			</view>
			<view class="flex flex-ai-center flex-js-sa mt-32 font-color-theme font-size-12 mb-24">
				<view @click="ruleShow = false">关闭</view>
			</view>
		</u-popup>
		<w-jy-verify ref="captcha" v-if="captchaStatus" @success='submit'></w-jy-verify>
	</w-container> 
</template>

<script>
	import { playInfo,synthesizeNow } from '@/api/compound/index.js';
	import mainImg from './components/mainImg.vue';
	import changeMaterials from './components/changeMaterials.vue';
	import SelectMaterials from './components/SelectMaterials.vue';
	import {mapState} from 'vuex'
	import opacityMixin from '@/mixins/opacityNav.js'
	export default {
		data() {
			return {
				confimPop:false,
				confimImgPop:false,
				isLoading:true,
				ruleShow:false,
				param:{
					play_id: '',
					grp: '',
					classify:''
				},
				user_json: [],      // 用户所选藏品
				image:'',
				title:'',
				description:'',
				rule_text:[],
				rule_hc_result:[],
				resultInfo:{}
			};
		},
		mixins: [opacityMixin],
		computed:{
			isDisabled(){
				let list = this.user_json;
				let newList = list.filter(item => item.user_collection_ids && (item.user_collection_ids.split(',').length == item.number))
				if(list.length==newList.length){
					return false
				}else{
					return true
				}
			},
			...mapState('config', {
				captchaStatus(state) {
					return !!Number(state.info.synthetic_check)
				}
			})
		},
		components:{ mainImg,changeMaterials,SelectMaterials },
		onLoad(e) {
			this.param.play_id = e.play_id || '';
			this.param.grp = e.grp || '';
			this.param.classify = e?.classify ?? '';
		},
		onShow() {
			this.getDetails()
		},
		methods:{
			confirmSubmit(){
				this.confimPop = false
				this.checkCaptcha()
				// setTimeout(() => {
				// 	this.confimImgPop = true
				// },200)
			},
			// 获取方案详情
			getDetails() {
				playInfo(this.param).then(res=>{
					this.isLoading = false
					let { image,title,description,rule_text,rule_hc_result } = res.data;
					this.image = image;
					this.title = title;
					this.description = description;
					this.rule_hc_result = rule_hc_result
					rule_text.map(item => {
						item.first_id = item.collectionInfo&&item.collectionInfo.length&&item.collectionInfo[0].id
					})
					this.rule_text = rule_text;
					this.user_json = this.getMlData(rule_text);
				}).catch(()=>{ this.isLoading = false })
			},
			
			checkCaptcha(){
				if(this.captchaStatus){
					this.$refs.captcha.showCaptcha();
				}else{
					this.submit();
				}
			},
			
			// 选择材料
			changeMl(e) {
				this.user_json = this.getMlData(e)
			},
			
			/**
			 * 切换优先用
			 */
			changeFirst(index,first_id){
				this.rule_text[index].first_id = first_id
				this.user_json = this.getMlData(this.rule_text)
			},
			
			// 材料数据
			getMlData(user_json) {
				return user_json.map(item=>{
					let { collection_ids,number,rule_id,collectionList,first_id } = item;
					// let collectionListId = collectionList.filter(item=>!!item.id);
					// let user_collection_ids = collectionListId.map(item=>item.id).join();
					return { rule_id,collection_ids,number,first_id }
				})
			},
			// 获取弹窗内容
			getPopContent() {
				let num = eval(this.user_json.map(item=>item.number).join("+"))
				return `您选择了${num}个藏品，合成成功后将进行销毁/回收/保留，确认合成？`
			},
			
			// 确认合成
			submit(validate) {
				this.param.user_json = this.$tools.base64Encode(JSON.stringify(this.user_json))
				uni.showLoading()
				synthesizeNow({
					...this.param,
					...validate
				}).then(res=>{
					// res.data.recordId && uni.navigateTo({ url:`/pages/compound/result?id=${res.data.recordId}` })
					this.resultInfo = res.data
					if(res.data.recordId) this.confimImgPop = true
				}).catch(err=>{})
			},
			lookOrder(){
				this.confimImgPop = false
				uni.navigateTo({ url:`/pages/compound/result?id=${this.resultInfo.recordId}`})
			}
		}
	}
</script>

<style lang="scss">
	.schemeDetails{
		padding-bottom:calc(200rpx + var(--window-bottom)) ;
		background-color: #544D50;
	}
	.border {
		border: 1rpx solid #C4C4C6;
	}
	.border-top {
		border-top: 1rpx solid #C4C4C6;
	}
	.border-left {
		border-left: 1rpx solid #C4C4C6;
	}
	.border-bottom {
		border-bottom:  1rpx solid #C4C4C6;
	}
	.border-right {
		border-right:1rpx solid #C4C4C6;
	}
	.btn-class {
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(3,4,70,0.1);
		height: 88rpx;
		color:#453C3F;
		font-weight: 500;
		line-height: 88rpx;
	}
	.synthesisimg-box {
		width: 558rpx;
		// height: 686rpx;
		background: #FEFEFE;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		padding: 32rpx 24rpx;
	}
	.card{
		width: 100%;
		border-radius: 16rpx;
		@extend .pa-12;
		box-shadow: 0px 1px 6px 0px rgba(43,45,57,0.03);
		>.title{
			font-size: 32rpx;
			font-family: 'YouSheBiaoTiHei';
			position: relative;
			z-index: 1;
			&::before{
				content: '';
				width: 40rpx;
				height: 16rpx;
				// background: linear-gradient(90deg, #DF0007 0%, rgba(0,102,254,0) 100%);
				position: absolute;
				left: 6rpx;
				bottom: 10rpx;
				z-index: -1;
			}
		}
	}
	.hc_button{
		width: 100%;
		height: auto;
		position: fixed;
		left: 0;
		bottom: 0;
		box-shadow: 0px -1px 6px 0px rgba(32,36,30,0.05);
		@extend .plr-16,.ptb-7,.bg-color-pageBg;
		background-color: #1E1E1E;
	}
	#deep .u-number-box__plus {
		color:#fff !important;
	}
</style>
